<template>
	<view class="page-content">
		<view v-if="configInfo.join_merchant == 1 || userInfo.merchant">
			<!-- 状态步骤 -->
			<view class="m-md section-bg radius-10 p-t-md p-b-md" v-if="!userInfo.merchant || userInfo.merchant && this.userInfo.merchant.state != 3">
				<uni-steps :options="stepsOptions" :active="speed" :active-icon="stepActiveIcon" :active-color="stepActiveColor"/></uni-steps>
			</view>
			<view class="p-md m-t-md" v-if="userInfo.merchant && !joinAgain">
				<view class="p-md empty flex-column flex-center"  v-if="userInfo.merchant.state == 1">
					<view class="empty__img">
						<image src="/static/images/empty-wait-check.png" mode="widthFix" style="width: 150px;"></image>
					</view>
					<text class="empty__title text-sm text-secondary">{{$t('merchant-apply.empty-text-1')}}</text>
				</view>
				<view class="p-md empty flex-column flex-center"  v-if="userInfo.merchant.state == 2">
					<view class="empty__img">
						<image src="/static/images/empty-check.png" mode="widthFix" style="width: 150px;"></image>
					</view>
					<text class="empty__title text-sm text-secondary">{{$t('merchant-apply.empty-text-2')}}</text>
					<!-- <view class="empty__button m-t-md text-sm">
						<u-button shape="circle" :color="configInfo.mainColor" :style="{'color':configInfo.btbColor}" text="管理任务"  @click="btnClick" ></u-button>
					</view> -->
				</view>
				<view class="p-md empty flex-column flex-center"  v-if="userInfo.merchant.state == 3">
					<view class="empty__img">
						<image src="/static/images/k5.png" mode="widthFix" style="width: 150px;"></image>
					</view>
					<text class="empty__title text-sm text-secondary">{{$t('merchant-apply.empty-text-3')}}</text>
					<view class="m-t-sm">
						<m-icon color="#f29100" name="error-warning-line" textSize="25rpx" :text="userInfo.merchant.state_desc"></m-icon>
					</view>
				</view>
				<view class="p-md empty flex-column flex-center"  v-if="userInfo.merchant.state == 4">
					<view class="empty__img">
						<image src="/static/images/empty-close.png" mode="widthFix" style="width: 150px;"></image>
					</view>
					<text class="empty__title text-sm text-secondary">{{$t('merchant-apply.empty-text-4')}}</text>
					<view class="m-t-sm">
						<m-icon color="#f29100" name="error-warning-line" textSize="25rpx" :text="userInfo.merchant.state_desc"></m-icon>
					</view>
					<view class="m-t-sm" v-if="userInfo.merchant.is_again_join == 1">
						<u-button 
							size="small" 
							type="warning"
							text="重新申请"
							shape="circle"
							@click="joinAgain = true "
						/>
					</view>
				</view>
			</view>
			<view class="" v-if="!userInfo.merchant || joinAgain">
				<!-- <u-alert type="warning" description="请认真填写申请表单"></u-alert> -->
				<!-- 显示表单 -->
				<view class="p-md m-md section-bg radius-10">
					<u--form
						:rules="rules"
						:model="merchant"
						ref="uForm" 
						:labelStyle="{paddingLeft:'15rpx',fontSize:'28rpx'}"
						labelWidth="180rpx"
					>
						<u-form-item
							:label="$t('merchant-apply.form-item-title-1')"
							prop="real_name"
						>
							<u--input
								:placeholder="$t('merchant-apply.form-item-placeholder-1')"
								v-model="merchant.real_name"
								:disabled="userInfo.merchant && !joinAgain"
							></u--input>
						</u-form-item>
						<u-form-item
							:label="$t('merchant-apply.form-item-title-2')"
							prop="mobile"
						>
							<u--input
								:placeholder="$t('merchant-apply.form-item-placeholder-2')"
								v-model="merchant.mobile"
								:disabled="userInfo.merchant && !joinAgain"
							></u--input>
						</u-form-item>
						<u-form-item
							:label="$t('merchant-apply.form-item-title-3')"
							prop="id_card"
						>
							<u--input
								:placeholder="$t('merchant-apply.form-item-placeholder-3')"
								v-model="merchant.id_card"
								:disabled="userInfo.merchant && !joinAgain"
							></u--input>
						</u-form-item>
						
						<u-form-item
							:label="$t('merchant-apply.form-item-title-4')"
							prop="id_card_imgs"
						>
							<m-uploads
								:uploadNum="1"
								modelNmae="0"
								@delete="deleteIdCard($event)"
								@confirm="uploadIdCard($event,0)"
								:disabled="userInfo.merchant && !joinAgain"
							>
							<image src="/static/images/id_renxiang.png"
							mode="widthFix" style="width: 215px;height: 150px;"></image>
							</m-uploads>
						</u-form-item>
						<u-form-item
							:label="$t('merchant-apply.form-item-title-5')"
							prop="id_card_imgs"
						>
							<m-uploads
								:uploadNum="1"
								modelNmae="1"
								@delete="deleteIdCard($event)"
								@confirm="uploadIdCard($event,0)"
								:disabled="userInfo.merchant && !joinAgain"
							>
							<image src="/static/images/id_guohui.png"
							mode="widthFix" style="width: 215px;height: 150px;"></image>
							</m-uploads>
						</u-form-item>
					</u--form>
				</view>
				<view class="m-md" v-if="!this.userInfo.merchant || joinAgain">
					<view class="flex-center p-b-sm" v-if="configInfo.merchant_agree_id">
						<u-checkbox-group shape="circle" @change="checkboxChange">
						    <u-checkbox name="agree" activeColor="#ff5e00"></u-checkbox>
						</u-checkbox-group>
						<view class="agree-text text-xs">
							{{$t('reg.agree-tips')}}<text class="text-warning" @click="$util.go('article/article_detail?id='+configInfo.merchant_agree_id)">《商家入驻协议》</text>
						</view>
					</view>
					<m-button shape="circle" :text="$t('merchant-apply.form-submit')" :disabled="false" @submit="submit"></m-button>
				</view>
			</view>
		</view>
		<view class="p-md m-t-md" v-if="configInfo.join_merchant == 2 && !userInfo.merchant">
			<view class="p-md empty flex-column flex-center">
				<view class="empty__img">
					<image src="/static/images/k5.png" mode="widthFix" style="width: 150px;"></image>
				</view>
				<text class="empty__title text-sm text-secondary">{{$t('merchant-apply.empty-text-5')}}</text>
			</view>
		</view>
		<side-tools :scrollTop="scrollTop"></side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				merchant: {
					real_name: '', 		// 姓名
					mobile:'',			// 手机号码
					id_card: '', 		// 身份证号
					id_card_imgs:[], 	// 身份证图片
				},
				rules: {
					real_name: {
						required: true,
						message: this.$t('merchant-apply.form-item-error-1'),
						trigger: ['blur']
					},
					mobile:[{
						required: true,
						message: this.$t('merchant-apply.form-item-error-2'),
						trigger: ['blur']
					},{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: this.$t('merchant-apply.form-item-error-3'),
						trigger: ['blur'],
					}],
					id_card:[{
						required: true,
						message: this.$t('merchant-apply.form-item-error-4'),
						trigger: ['blur']
					},{
						validator: (rule, value, callback) => {
							return this.$u.test.idCard(value);
						},
						message: this.$t('merchant-apply.form-item-error-5'),
						trigger: ['blur'],
					}],
					
					// id_card_imgs:[{
					// 	required: true,
					// 	message: '请上传身份证照片',
					// 	trigger: ['blur']
					// }],
				},
				scrollTop:0,
				speed:0,
				stepsOptions: [{
					title: this.$t('merchant-apply.step-title-1')
				}, {
					error:true,
					title: this.$t('merchant-apply.step-title-2')
				}, {
					error:true,
					title: this.$t('merchant-apply.step-title-3')
				}],
				stepActiveIcon:'checkbox',
				stepActiveColor:'#36b368',
				readAgree:false,
				joinAgain: false
			}
		},
		
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
		}),
		
		onLoad(){
			this.getUserInfo()
			// if(this.userInfo.merchant){
			// 	this.merchant = this.userInfo.merchant
			// }
		},
		onShow(){
			this.checkStep()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			...mapActions(['getUserInfo']),
			
			// 步骤
			checkStep(){
				let merchant = this.userInfo.merchant
				if(merchant){
					if(merchant.state == 1){
						this.speed = 1
					}
					if(merchant.state == 2){
						this.speed = 2
					}
					// 审核未通过
					if(merchant.state == 4){
						// this.
						this.speed = 2
						this.stepsOptions[2].title = this.$t('merchant-apply.step-title-4')
						this.stepActiveColor = '#f56c6c'
						this.stepActiveIcon = 'clear'
					}
				}
			},
			
			// 上传身份证
			uploadIdCard(e,index){
				this.merchant.id_card_imgs[e.modelName] = e.urls[0]
				console.log(this.merchant)
				// this.id_card_imgs.aspp = e.url
			},
			
			// 删除身份证
			deleteIdCard(e){
				console.log(e)
				this.merchant.id_card_imgs[e.modelName] = ''
				
			},
			
			// 提交
			async submit(){
				if(this.configInfo.merchant_agree_id && !this.readAgree){
					this.$util.showToast(this.$t('reg.agree-no-tips'));
					return false;
				}
				this.$util.showLoading(this.$t('app.submiting'))
				let res = await this.$api.merchant.submitApply(this.merchant)
				if(res.code == 200){
					let thos = this
					this.$util.showToast(res.msg,function(){
						thos.getUserInfo()
						thos.checkStep()
						thos.speed = 1
						thos.joinAgain = false
						thos.stepActiveColor = '#36b368'
						thos.stepActiveIcon = 'checkbox'
					});
				}
				console.log(this.merchant)
			},
			
			// 勾选协议
			checkboxChange(n){
				if(n[0] == 'agree'){
					this.readAgree = true;
				}else{
					this.readAgree = false;
				}
			}
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color:var(--theme-page-bg);
	}
	.success-icon{
		border-radius: 25px;
		width: 15rpx;
		height: 15rpx;
		background-color: #36b368;
		border:3px solid #e8faef;
		box-sizing: content-box;
		border-radius: 100%;
		padding: 3px;
	}
</style>